<template>
  <div class="transitionModel">
    <button @click="show = !show">Toggle render</button>
    <transition>
      <slot :show="show"></slot>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  components: {},
  data() {
    return {
      show: false,
    };
  },
  methods: {},
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.transitionModel {
  height: 60px;
  .v-enter-active {
    transition: all 2s linear;
    color: yellow;
  }
  .v-leave-active {
    transition: all 2s linear;
  }
  .v-enter-from {
    transform: translateX(-60px);
    color: red;
  }
  .v-leave-to {
    transform: translateX(160px);
    color: green;
  }
}
</style>
